<template>
  <div>
    <div class="shoppingPro" v-for="item in content">
      <div class="shoppingProOne">
        <div @click="selectIfBuyPro(item.comId)" class="shoppingProTwo">
          <div v-if="item.isSelect" class="shoppingProThree">
            <i class="el-icon-check"></i>
          </div>
          <div v-if="item.isSelect" class="shoppingProFour">
            <i class="el-icon-check"></i>
          </div>
        </div>
      </div>
      <div class="shoppingProFive">
        <img :src="item.comShowMaxImgGroup" @click="clickGoDetaPage(item.comId)" class="shoppingProSix">
      </div>
      <div class="shoppingProSeven" style="">
      <span class="comMsg" @click="clickGoDetaPage(item.comId)">
        {{item.currentSerName}}&nbsp;&nbsp;{{item.currentColor}}&nbsp;&nbsp;{{item.currentConfig}}
      </span>
      </div>
      <div class="shoppingProEight">
        ￥{{item.comPrice}}
      </div>
      <div class="shoppingProNine">
        <button-update-num @updateemit="updateNumEmit($event,item.comId)" :curr-val="item.proNum"/>
      </div>
      <div class="deleteButton">
        <div class="deleteButtonOne" @click="clickDeleteIcon(item.comId)"><!--显示删除图标-->
          <i class="el-icon-delete" style="font-size: 20px;"></i>
        </div>
      </div>
      <div v-if="item.serviceName" class="shoppingProTen">
        <div class="shoppingProEleven">
          <el-button type="warning" plain disabled size="mini">服务</el-button>&nbsp;&nbsp;&nbsp;
          {{isShow(item,0)}}
        </div>
        <div class="shoppingProTwelve">￥{{isShow(item,1)}}</div>
        <div class="shoppingProThirteen">x1</div>
      </div>
      <!--这是弹出层内容-->
      <el-dialog
        title="提示"
        v-model="centerDialogVisible"
        width="30%"
        :modal="false"
        center >
        <span>请确认是否从购物车删除该商品？</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteShoppingPro()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {mapActions,mapGetters,mapState} from "vuex"

  import ButtonUpdateNum from "../detailPage/ButtonUpdateNum";

  import {deleteShoppingCarMsgByComIdAndUserId,updateShoppingCarData} from "../../../network/home";

  export default {
    name: "ShoppingPro",
    components: {
      ButtonUpdateNum
    },
    data() {
      return {
        content: [],
        centerDialogVisible: false,//这是弹出层是否打开boolean变量
        deleteComId: null
      }
    },
    methods: {
      ...mapActions({
        updateIsSelect: "ShopCarData/updateIsSelect",
        deleteShoppingPros: "ShopCarData/deleteShoppingPro"
      }),
      clickDeleteIcon(comId){
        //显示弹出层
        this.centerDialogVisible = true;
        //对data的删除comId赋值
        this.deleteComId = comId;
      },
      isShow(item, index) {//这是提供给保修服务显示的方法
        if (!item.serviceName) return "";
        return item.serviceName.split("￥")[index]
      },
      selectIfBuyPro(comId) {//修改是否购买的状态
        this.updateIsSelect(comId);
        //发送事件给父类
        this.$emit("selectemit");
      },
      updateNumEmit(event, comId) {//修改数量的事件，事件再向外传递
        this.$emit("updatenumemit", {currVal: event, comId});
        //发送数据到后台修改购物车对应数量
        updateShoppingCarData(this.getUserId,comId,event)
          .then(data => {
            console.log(data);
          })
      },
      deleteShoppingPro() {//删除购物车商品
        //关闭弹出层
        this.centerDialogVisible = false;
        //删除后台数据库当中对应的购物车商品
        deleteShoppingCarMsgByComIdAndUserId(this.getUserId,this.deleteComId)
          .then(data => {
            if (data){
              this.$message.success("删除商品成功！");
            }else this.$message.error("删除商品失败！");
          });
        //在store当中做删除，这里为什么要做两次删除而不是重新请求后台数据库后刷新store呢，
        //是因为让用户能够更加流畅的看到删除后的结果而不必等到数据库响应之后才能看到结果
        this.deleteShoppingPros(this.deleteComId)
          .then(data => {//当store中的购物车商品删除完成之后，刷新session中的值
            this.refreshShopCarSessionStorageData;
          })
        this.$emit("ifclear");
      },
      clickGoDetaPage(comId) {//点击跳往详情页面
        this.$router.push({path: "/detail", query: {"comId": comId}});//跳转到详情页面
      }
    },
    computed: {
      ...mapGetters({
        getData: "ShopCarData/giveDataShoppingCar",
        refreshShopCarSessionStorageData: "ShopCarData/refreshShopCarSessionStorageData",
        getUserId: "UserMsg/getUserId"
      }),
      ...mapState({
        monitorParam: state => state.ShopCarData.param
      })
    },
    watch: {
      monitorParam: {
        immediate: true,
        handler: function (newVal) {
          this.content = this.getData;
        }
      }
    },
    created() {
      this.content = this.getData;
    }
  }
</script>

<style scoped>
  .shoppingProThirteen {
    width: 41%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shoppingProTwelve {
    width: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shoppingProEleven {
    width: 35%;
    display: flex;
    align-items: center
  }

  .shoppingProTen {
    width: 850px;
    height: 80px;
    margin-left: 280px;
    display: flex;
    border-top: #e7e7e7 solid 1px
  }

  .shoppingProNine {
    width: 350px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .shoppingProEight {
    width: 100px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .shoppingProSeven {
    width: 300px;
    height: 120px;
    display: flex;
    align-items: center;
  }

  .shoppingProSix {
    width: 60px;
    height: 60px;
    cursor: pointer
  }

  .shoppingProFive {
    width: 150px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-icon-check {
    color: white;
    font-size: 18px;
    font-weight: bold
  }

  .shoppingProFour {
    background-color: white;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
  }

  .el-icon-check {
    color: white;
    font-size: 18px;
    font-weight: bold
  }

  .shoppingProThree {
    background-color: orangered;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
  }

  .shoppingProTwo {
    cursor: pointer;
    width: 25px;
    height: 25px;
    cursor: pointer;
    border-radius: 100%;
    border: silver solid 1px
  }

  .shoppingProOne {
    width: 130px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shoppingPro {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-top: #e7e7e7 solid 1px;
  }

  .comMsg {
    cursor: pointer;
  }

  .comMsg:hover {
    opacity: 0.5;
  }

  .deleteButton {
    width: 100px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .deleteButtonOne:hover {
    cursor: pointer;
    opacity: 0.5;
  }

</style>
